<template>
    <breadCrumb ref="BreadCrumb" :item="item"></breadCrumb>
    <div class="overview-wrapped">
        <div class="top-content-wrapped">
            <div class="person-infor">
                <div class="person-avatar-wrapped">
                    <el-avatar :size="100" :src="imageUrl" />
                    <span class="department">
                        所属部门:财务部
                    </span>
                    <div class="college">
                        所属学院:计算机学院
                    </div>
                </div>
                <div class="line-wrapped">
                    <div class="line"></div>
                </div>
                <div class="detail-infor-wrapped">
                    <p>姓名 : {{ userStore.name }}</p>
                    <p>性别 : {{ userStore.sex }}</p>
                    <p>身份 : {{ userStore.identity }}</p>
                </div>
            </div>
            <div class="manage-user pie"></div>
        </div>
        <div class="mid-content-wrapped">
            <div class="product-category-bar mid-content-left"></div>
            <div class="mid-content-right">
                <div class="title">常用功能管理</div>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="button-area" @click="toRouter('application')">
                            <SvgIcon icon-name="item" style="width: 24px;height: 24px;"></SvgIcon>
                            <span class="button-name">项目管理</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="button-area" @click="toRouter('setting')">
                            <SvgIcon icon-name="self" style="width: 24px;height: 24px;"></SvgIcon>
                            <span class="button-name">个人信息</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="button-area" @click="open">
                            <SvgIcon icon-name="department" style="width: 24px;height: 24px;"></SvgIcon>
                            <span class="button-name">部门信息</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="button-area" @click="toRouter('setting')">
                            <SvgIcon icon-name="setting" style="width: 24px;height: 24px;"></SvgIcon>
                            <span class="button-name">系统设置</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="button-area" @click="toRouter('student')" v-if="userStore.identity === '超级管理员'">
                            <SvgIcon icon-name="user" style="width: 24px;height: 24px;"></SvgIcon>
                            <span class="button-name">用户管理</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="button-area" @click="toRouter('message_list')" v-if="userStore.identity == '超级管理员'">
                            <SvgIcon icon-name="system" style="width: 24px;height: 24px;"></SvgIcon>
                            <span class="button-name">系统消息</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="footer-content-wrapped">
            <div class="message-level footer-content-left"></div>
            <div class="userlogin-week footer-content-right"></div>
        </div>
    </div>
    <deptMsg ref="dept_msg"></deptMsg>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import breadCrumb from '@/components/breadCrumb.vue'
import { useUserInfoStore } from '@/store/userInfo.js'
import * as echarts from 'echarts'
import SvgIcon from '@/components/svgIcon.vue'
import {
    getCategoryAndNumber,
    getAdminAndNumber,
    getLevelAndNumber,
    getDayAndNumber,
    getFeedbackAndNumber
} from '@/api/overview.js'
import { useRouter } from 'vue-router'
import deptMsg from '@/components/department_message.vue'

const dept_msg = ref()
const open = () => {
    dept_msg.value.open()
}
onMounted(() => {
    manageUser()
    productCategoryBar()
    massageLevel()
    massageAllDay()
})
// 路由
const router = useRouter()
//页面跳转
const toRouter = (path:string) => {
    router.push(`/${path}`)
}
//个人信息
const userStore = useUserInfoStore()
const imageUrl = ref(userStore.imageUrl)
// 面包屑
const BreadCrumb = ref()
const item = {
    first: '系统概览'
}
// 管理员与用户比值图
const manageUser = async () => {
    // 通过类名 初始化
    const mu = echarts.init(document.querySelector('.manage-user'))
    mu.showLoading({
        text: '正在加载数据中...',
        effect: 'whirling',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)'
    })
    const data = ref()
    const res = await getFeedbackAndNumber()
    data.value = res.data.data
    mu.hideLoading()
    document.querySelector('.manage-user').setAttribute('_echarts_instance_', '')
    // 设置基本的参数
    mu.setOption({
        title: {
            text: '举报与反馈对比图',
            // subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            padding: [20, 20, 20, 20]
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: '65%',
                data: data.value,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
    // 用于echarts响应式
    window.addEventListener('resize', function () {
        mu.resize()
    })
}
// 奖助学金项目类别图
const productCategoryBar = async () => {
    const pcb = echarts.init(document.querySelector('.product-category-bar'))
    pcb.showLoading({
        text: '正在加载数据中...',
        effect: 'whirling',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)'
    })
    const data = ref()
    const res = await getCategoryAndNumber()
    data.value = res.data
    pcb.hideLoading()
    document.querySelector('.product-category-bar').setAttribute('_echarts_instance_', '')
    pcb.setOption({
        title: {
            text: "奖助学金项目类别图",
            top: "3%",
            textStyle: {
                fontSize: 16
            },
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            data: data.value.types,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: data.value.numbers,
                type: 'bar',
                barWidth: 40,
                colorBy: "data"
            },
        ]
    })
    window.addEventListener('resize', function () {
        pcb.resize()
    })
}
// 公告等级分布图
const massageLevel = async () => {
    const ml = echarts.init(document.querySelector('.message-level'))
    ml.showLoading({
        text: '正在加载数据中...',
        effect: 'whirling',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)'
    })
    const data = ref()
    const res = await getLevelAndNumber()
    data.value = res.data.data
    ml.hideLoading()
    document.querySelector('.message-level').setAttribute('_echarts_instance_', '')
    ml.setOption({
        title: {
            text: "公告等级分布图",
            top: "3%",
            textStyle: {
                fontSize: 16
            },
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: 'center',
            textStyle: {
                fontSize: 10
            },
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: ['35%', '65%'],
                center: ['50%', '65%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data.value,
            }
        ]
    })
    window.addEventListener('resize', function () {
        ml.resize()
    })
}
// 消息每日总量图
const massageAllDay = async () => {
    const mad = echarts.init(document.querySelector('.userlogin-week'))
    mad.showLoading({
        text: '正在加载数据中...',
        effect: 'whirling',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)'
    })
    const data = ref()
    const res = await getDayAndNumber()
    data.value = res.data
    console.log(data.value)
    mad.hideLoading()
    document.querySelector('.userlogin-week').setAttribute('_echarts_instance_', '')
    mad.setOption({
        title: {
            text: "每日登录人数图",
            top: "3%",
            textStyle: {
                fontSize: 16
            },
        },
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: data.value.week,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: data.value.number,
                type: 'line',
                smooth: true
            }
        ]
    })
    window.addEventListener('resize', function () {
        mad.resize()
    })
}
</script>
<style lang="scss" scoped>
// 总览内容
.overview-wrapped {
    padding: 8px;
    height: calc(100vh - 101px);
    background: #f8f8f8;

    // 上部分内容 个人资料 + 饼状图
    .top-content-wrapped {
        height: 30%;
        display: flex;

        // 个人信息
        .person-infor {
            height: 100%;
            margin-right: 8px;
            width: calc(50% - 8px);
            display: flex;
            background: #fff;

            // 头像区域
            .person-avatar-wrapped {
                display: flex;
                width: 50%;
                height: 100%;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                // 学院
                .college {
                    margin: 10px 0px;
                    font-size: 12px;
                }

                // 职务
                .department {
                    margin-top: 8px;
                    font-size: 12px;
                }

            }

            // 分割线
            .line-wrapped {
                height: 100%;
                display: flex;
                align-items: center;

                .line {
                    height: 170px;
                    border: 1px solid #D3D3D3;
                }
            }

            // 详细信息区域
            .detail-infor-wrapped {
                height: 100%;
                width: calc(50% - 1px);
                margin-left: 50px;
                font-size: 12px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
            }
        }

        // 饼状图
        .pie {
            width: calc(50%);
            height: 100%;
            background: #fff;
        }
    }

    // 中间部分内容 消息阅读量图 产品类别图
    .mid-content-wrapped {
        margin-top: 8px;
        height: calc(32% - 8px);
        display: flex;

        // 中间左部分
        .mid-content-left {
            margin-right: 8px;
            width: calc(60% - 8px);
            background: #fff;
        }

        // 中间右部分
        .mid-content-right {
            width: calc(40%);
            background: #fff;
            padding: 8px;

            // 标题
            .title {
                font-size: 14px;
                margin-bottom: 8px;
            }

            // 按钮区域
            .button-area {
                margin-bottom: 8px;
                height: 75px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                background: #F5F5F5;

                // 按钮名字
                .buttom-name {
                    margin-top: 10px;
                }
            }

            // 按钮变色
            .button-area:hover {
                background: #e4efff;
            }
        }
    }

    // 底部内容
    .footer-content-wrapped {
        margin-top: 8px;
        height: calc(38% - 8px);
        display: flex;

        // 底部左部分
        .footer-content-left {
            margin-right: 8px;
            height: 100%;
            width: calc(30% - 8px);
            background: #fff;
        }

        // 底部右部分
        .footer-content-right {
            height: 100%;
            width: calc(70%);
            background: #fff;
        }
    }
}
</style>